<template>
	<view class="backgroundbox">
		<view class="boxtltle">
			赠送信息
		</view>
		<view class="xinxiboxone">
			<view class="hzpeople" v-if="id != list.b_user_id">
				<view class="hzpeople_top">
					获赠人：
				</view>
				<image :src="list.avatar" class="tximg"></image>
				<view class="text_name">{{ list.nickname }}</view>
			</view>
			<view class="hzpeople" v-else="id == list.b_user_id">
				<view class="hzpeople_top">
					赠送人：
				</view>
				<image :src="list.avatar" class="tximg"></image>
				<view class="text_name">{{ list.nickname }}</view>
			</view>
			<view class="liuyan" v-if="list.remark">
				{{ list.remark }}
			</view>
			<view class="liuyan" v-else>
				无备注信息
			</view>
		</view>
		<view class="boxtltle">
			商品信息
		</view>
		<view class="itembox">
			<view class="timetext">
				赠送时间：{{ list.create_time }}
			</view>
			<view class="gsbox">
				<view class="nrbox" v-for="j in list.prize_list" :key="j.order_id" @click="todetail(j.goods_id)">
					<!-- :style="{backgroundImage:'url(' + jieguobox.shuju.msg_img + ')'}" -->
					<view class="nrimgbox">
						<image :src="j.prize_icon" mode="aspectFit"></image>
					</view>
					<view class="nrboxtitle">
						{{ j.prize_name }}
					</view>
					<view class="rnbottmtext">
						<view class="rnjg">
							￥{{ j.price }}
						</view>
						<view class="rnbs">
							x{{ j.num }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xinxiboxone1">
			<view class="xinxiboxone1_top">
				赠送时间：{{ list.create_time }}
			</view>
			<view class="xinxiboxone1_top">
				<view class="xinxiboxone1_top_l">
					赠送单号：{{ list.order_no }}
				</view>
				<view class='xinxiboxone1_top_r' @click="copy(list.order_no)">复制</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			id: 0
		}
	},
	onLoad(list) {
		this.list = JSON.parse(list.list)
		this.getuserlist()
	},
	methods: {
		//跳转商品详情
		todetail(e) {
			////console.log('e', e)
			uni.navigateTo({
				url: "/orderPage/index/mhlistDetail?goods_id=" + e
			})
		},
		copy(e) {
			uni.setClipboardData({
				data: e,
				success: () => {
					uni.showToast({
						title: '复制成功'
					})
				}
			})
		},
		getuserlist() {
			this.$Request.get(this.$api.user.index).then(res => {
				if (res.code == 406) {
					return;
				}
				this.id = res.data.userInfo.id
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.backgroundbox {
	background: #262626;
	height: 100vh;
}

.boxtltle {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	padding: 41rpx 0rpx 40rpx 46rpx;
}

.xinxiboxone {
	width: 95%;
	height: 230rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 2rpx solid #FED187;
	margin: 0 auto;
	padding: 24rpx 40rpx 57rpx;
}

.xinxiboxone1 {
	width: 95%;
	height: 178rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 2rpx solid #FED187;
	margin: 28rpx auto 0;
	padding: 10rpx 40rpx 0;
	color: #fff;

	.xinxiboxone1_top {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;

		.xinxiboxone1_top_l {}

		.xinxiboxone1_top_r {
			width: 98rpx;
			height: 46rpx;
			border: 1rpx solid #E18330;
			border-radius: 23px;
			line-height: 46rpx;
			justify-content: flex-end;
			margin-left: auto;
			font-size: 24rpx;
			font-weight: 500;
			color: #E18330;
			text-align: center;
		}
	}
}


.itembox {
	width: 95%;
	height: 390rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 2rpx solid #FED187;
	border-radius: 10px;
	margin: 0 auto;
	padding: 31rpx;
}

.timetext {
	font-size: 24rpx;
	font-weight: 500;
	color: #A4A4A4;
}

.gsbox {
	padding: 30rpx 0;
	display: flex;
	overflow: hidden;
	overflow-x: auto;
}

.nrbox {
	width: 192rpx;
	height: 274rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 1rpx solid #FED187;
	// border: 1rpx solid #DADADA;
	border-radius: 10px;
	margin-right: 35rpx;
}

.nrimgbox {
	width: 188rpx;
	height: 120rpx;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 26rpx auto 30rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.nrboxtitle {
	width: 181rpx;
	font-size: 20rpx;
	color: #091324;
	height: 25rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 auto;
	// margin-top: 25rpx;
}

.rnbottmtext {
	width: 181rpx;
	display: flex;
	align-items: center;
	margin-top: 17rpx;
}

.rnjg {
	margin-left: 15rpx;
	color: #F46E13;
	font-size: 23rpx;
}

.rnbs {
	font-size: 20rpx;
	justify-content: flex-end;
	margin-left: auto;
}

.hzpeople {
	display: flex;
	align-items: center;

	.hzpeople_top {
		font-size: 26rpx;
		color: #fff;
	}

	.text_name {
		color: #F46E13;
		width: 460rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.tximg {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
		margin-right: 17rpx;
	}
}


.liuyan {
	height: 100rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #A4A4A4;
	margin-top: 20rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
</style>
